<!-- 纵向布局 -->
<template>
  <a-layout class="layout-container">
    <a-layout-header class="layout-header">
      <div class="logo">
        <img class="logo-img" src="../../assets/images/logo.svg" alt="logo" />
        <span class="logo-text">ant-design</span>
      </div>
      <Header></Header>
    </a-layout-header>
    <a-layout>
      <!--左侧菜单-->
      <a-layout-sider
        v-model:collapsed="iscollapsed"
        :trigger="null"
        collapsible
        theme="light"
        :style="{
          width: iscollapsed ? '65px' : '210px',
          // transition: 'width 1s ease-in-out'
        }"
        class="layout-sider"
      >
        <div class="menu-scrollbar">
          <Menu></Menu>
        </div>
      </a-layout-sider>
      <a-layout>
        <div class="header-bottom">
          <TabNav></TabNav>
        </div>
        <!-- 内容展示区 -->
        <a-layout-content
          :style="{ minHeight: '280px' }"
          class="layout-content"
        >
          <router-view></router-view>
        </a-layout-content>
        <!-- 底部区域 -->
        <Footer></Footer>
      </a-layout>
    </a-layout>
  </a-layout>
</template>
<script lang="ts" setup>
import Header from '../components/Header';
import { storeToRefs } from 'pinia';
import { useGlobalStore } from '@/store/modules/global';
import Menu from '../components/Menu';
import TabNav from '../components/TabNav';
import Footer from '../components/Footer';
const globalStore = useGlobalStore();
const { iscollapsed } = storeToRefs(globalStore);
</script>
<style lang="scss" scoped>
@use './index.scss';
</style>
